<template>
  <div class="banner-box">
    <div class="margin-auto">
      <div class="banner-cont banner-left" @click="$refs.carousel.prev()"></div>
      <el-carousel
        v-loading="bannerLoding"
        :element-loading-background="ELEMENT_LOADING_BACKGROUND"
        element-loading-spinner="el-icon-loading"
        :element-loading-text="ELEMENT_LOADING_TEXT"
        trigger="click"
        ref="carousel"
        :interval="5000"
        class="banner"
        height="100%"
      >
        <el-carousel-item v-for="(item, index) in banners" :key="item.imageUrl">
          <img
            :name="index"
            height="100%"
            style="cursor: pointer"
            :src="item.imageUrl"
            @click="openBannerScreen(item.url)"
          />
        </el-carousel-item>
      </el-carousel>
      <div class="right-banner">
        <router-link class="download-a" to="/download" tag="a"></router-link>
        <p class="bottom-text">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
      </div>
      <div
        class="banner-cont banner-right"
        @click="$refs.carousel.next()"
      ></div>
    </div>
  </div>
</template>

<script>
import { apiBanner } from "@/api";

export default {
  name: "banner",
  data() {
    return {
      banners: [],
      bannerLoding: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getBannerList();
    },
    getBannerList() {
      this.bannerLoding = true;
      apiBanner({ type: 0 }).then((data) => {
        this.banners = data.banners;
        this.bannerLoding = false;
      });
    },
    setActiveIte1(val) {
      this.$refs.carousel.prev();
      this.$refs.carousel.next();
    },
    openBannerScreen(val) {
      val ? window.open(val) : "";
    },
  },
};
</script>

<style lang="scss" scoped>
.banner-cont {
  padding: 5px 0;
  &:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
  cursor: pointer;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}

.banner-box {
  background-image: url(http://p1.music.126.net/Op6Zmme4XY-BwwjBOYxtXQ==/109951165314172312.jpg?imageView&blur=40x20);
  .margin-auto {
    height: 284px;
    width: 1000px;
    margin: 0 auto;
    display: flex;
    position: relative;
    .banner {
      flex: 1;
      position: relative;
      height: 100%;
    }
    .right-banner {
      width: 254px;
      height: 100%;
      background-color: #99f;
      background-image: url("../../assets/img/downloadbg.png");
      position: relative;
      .download-a {
        position: absolute;
        bottom: 30px;
        width: 215px;
        height: 56px;
        left: 19px;
        bottom: 43px;
        border-radius: 2px;
        // background-image: url("../../assets/img/downloadbg.png");
        // background-position: bottom left;
      }
      .bottom-text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        font-size: 12px;
        color: #8d8d8d;
        padding: 12px 0;
        text-align: center;
      }
    }
  }
}
.banner-left {
  left: -70px;
  background-image: url(../../assets/img/left-back.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.banner-right {
  right: -70px;
  background-image: url(../../assets/img/right-back.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
</style>